import { Image, StyleSheet, Platform, TextInput, Button } from "react-native";
import { Text, View, TouchableOpacity } from "react-native";
import { useState, useEffect } from "react";
import  axiosApi from '../zhcFile/axiosApi/axiosApi'

const Ress = () => {
  const [seconds, setSeconds] = useState(60); // 倒计时的秒数
  const [isCounting, setIsCounting] = useState(false); // 是否正在倒计时
  const [verificationCode, setVerificationCode] = useState(""); // 输入框内容
  const [ressms, setRessms] = useState(''); // 输入框内容
  const[phone, setPhone] = useState(''); // 输入框内容
  const [passowrd, setPassowrd] = useState(''); // 输入框内容

  const yanzhengma = () => {
    axiosApi.post('/llp/get_sms', {
      phone:'17621774663'
    }).then((res:any) => {
      console.log(res.data);
      setRessms(res.data.sms)
    })
  }
  // 倒计时逻辑
  useEffect(() => {
    let timer: any;
    if (isCounting && seconds > 0) {
      timer = setInterval(() => {
        setSeconds((prev) => prev - 1); // 每秒减少1
      }, 1000);
    } else if (seconds === 0) {
      setIsCounting(false); // 倒计时结束
    }

    // 清理定时器
    return () => clearInterval(timer);
  }, [isCounting, seconds]);
  const send = () => {
      
  }
  const handlePress = () => {
    if (!isCounting) {
      setSeconds(60); // 重新设置为60秒
      setIsCounting(true); // 开始倒计时
      yanzhengma()
    }
  };
  const sendlogin = () => {
    axiosApi.post('/llp/login', {
      phone: phone,
      passowrd: passowrd,
      names: '医疗人员',
      users: 'admin',
      img:'file:///data/user/0/host.exp.exponent/files/photos/1732930285005.jpg'
    }).then((res:any) => {
      console.log(res.data);
    })
  }
  return (
    <View style={{ backgroundColor: "#fff" }}>
      <View style={styles.top}>注册</View>
      <View style={styles.imagess}>
        <Image
          source={{
            uri: "https://www.axured.cn/assets/axurefiles/39ba1792dbc57ee8063b17cf7a5c9fcc_478/images/%E6%B3%A8%E5%86%8C/u2342.png",
          }}
          style={{ width: 100, height: 100, borderRadius: 50, borderWidth: 1 }}
        ></Image>
      </View>
      <View style={styles.inputs}>
        <TextInput
          style={{ width: "100%", height: 50 }}
          placeholder="请输入手机号"
          placeholderTextColor="#aaaaaa"
        ></TextInput>
        <View style={styles.yanzhengma}>
          <TextInput
            style={{
              width: "100%",
              height: 50,
            }}
            placeholder="请输入验证码"
            placeholderTextColor="#aaaaaa"
            value={verificationCode}
            onChangeText={setVerificationCode}
          />
          <TouchableOpacity
            style={{
              backgroundColor: "#007bff",
              paddingVertical: 10,
              paddingHorizontal: 20,
              borderRadius: 5,
            }}
            onPress={handlePress}
            disabled={isCounting} // 禁用按钮，直到倒计时结束
          >
            <Text style={{ color: "#fff" }}>
              {isCounting ? `重新发送(${seconds}s)` : "获取验证码"}
            </Text>
          </TouchableOpacity>
        </View>
        <TextInput
          style={{ width: "100%", height: 50 }}
          placeholder="请设置6-20登录密码"
          placeholderTextColor="#aaaaaa"
          onChangeText={setPassowrd}
        ></TextInput>
        <TextInput
          style={{ width: "100%", height: 50 }}
          placeholder="请再次确认登陆密码"
          placeholderTextColor="#aaaaaa"
        ></TextInput>
      </View>
      <View style={styles.botton}>
        我已阅读并同意《<span style={{ color: "#0079fe" }}>用户服务协议</span>》
      </View>
      <View style={styles.zhuce}>
        <Button title="注册" color={"#0079fe"} onPress={sendlogin()}/>
      </View>
      <View style={styles.denglu}>
        <span style={{ color: "#0079fe" }}>已有账户,立即登录</span>
      </View>
    </View>
  );
};

export default Ress;

const styles = StyleSheet.create({
  top: {
    height: 50,
    width: "100%",
    backgroundColor: "#fff",
    textAlign: "center",
    lineHeight: 50,
  },
  imagess: {
    height: 150,
    width: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  inputs: {
    height: 200,
    width: "90%",
    marginLeft: "5%",
    backgroundColor: "#fff",
  },
  yanzhengma: {
    height: 50,
    width: "100%",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  botton: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    flexDirection: "row",
    marginBottom: 20,
  },
  zhuce: {
    height: 50,
    width: "90%",
    marginLeft: "5%",
    backgroundColor: "#0079fe",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    marginBottom: 20,
  },
  denglu: {
    fontSize: 12,
    textAlign: "center",
    marginBottom: 80,
  },
});
